<template>
  <!-- 最大的容器 -->
  <div>
    <IndexHead></IndexHead>
    <!-- 内容部分1 -->
    <div class="box3">
      <div class="container">
        <div class="caption-content text-center">
          <h4>开始智慧互联</h4>
          <h2>互联社区
            <br>
            智慧大脑
          </h2>
          <p>“十四五”规划和2035年远景目标纲要要求构建基层社会治理新格局，推动社会治理和服务重心下移、资源下沉，
            <br>
            提高城乡社区精准化精细化服务管理能力，建设人人有责、人人尽责、人人享有的社会治理共同体。
          </p>
        </div>
      </div>
    </div>
    <!-- 内容部分1.1 -->
    <!-- <div class="box6">
      <div class="w">
        <el-row :gutter="10">
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <div class="grid-content bg-purple one">
              <h4>电子通行证</h4>
              <i class="iconfont icon-drxx19"></i>
              <p>电子通行证不仅可以免去人工登录的繁琐，而且大大提升了工作效率，通过系统后台可实时掌握需要的各类数据。</p>
            </div>
          </el-col>
          <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
            <div class="grid-content bg-purple-light two">
              <h2>互联社区系统功能</h2>
            </div>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <div class="grid-content bg-purple three">
              <h4>服务预约</h4>
              <i class="iconfont icon-yuyuedingdan"></i>
              <p>服务预约可以节省宝贵的时间，根据办事人自身时间有计划的安排预约时间，避免长时间等候。</p>

            </div>
          </el-col>
          <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
            <div class="grid-content bg-purple-light four">
              <h4>志愿者</h4>
              <i class="iconfont icon-houtaitubiao-15"></i>
              <p>简化社区志愿者的申请和审核流程。</p>

            </div>
          </el-col>
        </el-row>
        <div class="five">
          <el-row :gutter="10">
            <el-col :span="25" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="grid-content bg-purple six" style="height: 270px;">
                <h4>活动报名</h4>
                <i class="iconfont icon-baoming"></i>
                <p>管理员发起活动报名功能，支持添加活动主题、分类、类型、时间、地点、费用等各类功能。可在后台查看报名记录，支持导出报名数据。</p>

              </div>
            </el-col>
            <el-col :span="25" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="grid-content bg-purple seven" style="height: 270px;">
                <h4>一刻钟服务圈</h4>
                <i class="iconfont icon-xiazai20"></i>
                <p>社区居民居住地附近范围能够享受到方便、快捷、舒适的社区服务，包括社会力量和居民个人提供的志愿互助服务，市场机制提供的便民利民服务以及特色服务等。</p>

              </div>
            </el-col>
            <el-col :span="25" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="grid-content bg-purple eight" style="height: 270px;">
                <h4>议事平台</h4>
                <i class="iconfont icon-renqun"></i>
                <p>可定期组织开展协商议事，随时随地让居民参与议事，让居民在协商议事中“做主角”。</p>

              </div>
            </el-col>
            <el-col :span="25" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="grid-content bg-purple nine" style="height: 270px;">
                <h4>调查问卷</h4>
                <i
                  class="iconfont icon-wenjuanguanli
                                                                                                                                                                      "></i>
                <p>方便的生成相关调查问卷，并及时的了解相应信息，同时还可以定制统计的条件以及设定答卷的方式。支持导出调查问卷结果。</p>

              </div>
            </el-col>
            <el-col :span="25" :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
              <div class="grid-content bg-purple ten" style="height: 270px;">
                <h4>社区党建</h4>
                <i class="iconfont icon-jianzhu"></i>
                <p>如果说社区治理工作面临的是上上下下“千条线”，那么毋庸置疑，社区党建是穿起“千条线”的“一根针”。只有通过强党建，才能实现强治理、强发展。良好的社区治理秩序和成效，始终离不开社区党建工作的有力引领。</p>

              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div> -->
    <!-- 内容部分1.2 -->
    <div class="box7">
      <div class="w">
        <h2>互联社区系统功能</h2>
        <div class="Product">
          <el-card :body-style="{ padding: '0px' }">
            <div class="image">
              <img src="@/assets/images/chanpin1.jpg" alt="">
            </div>
            <h4>电子通行证</h4>
            <p style="text-align: left;">电子通行证不仅可以免去人工登录的繁琐，而且大大提升了工作效率，通过系统后台可实时掌握需要的各类数据。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }">
            <div class="image">
              <img src="@/assets/images/chanpin2.jpg" alt="">
            </div>
            <h4>服务预约</h4>
            <p style="text-align: left;">服务预约可以节省宝贵的时间，根据办事人自身时间有计划的安排预约时间，避免长时间等候。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }">
            <div class='image'>
              <img src="@/assets/images/chanpin3.jpg" alt="">
            </div>

            <h4>志愿者</h4>
            <p style="text-align: left;">简化社区志愿者的申请和审核流程。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }">
            <div class="image">
              <img src="@/assets/images/chanpin4.jpg" alt="">
            </div>
            <h4>活动报名</h4>
            <p style="text-align: left;">管理员发起活动报名功能，支持添加活动主题、分类、类型、时间、地点、费用等各类功能。可在后台查看报名记录，支持导出报名数据。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="height: 300px;">
            <div class="image">
              <img src="@/assets/images/chanpin5.jpg" alt="">
            </div>
            <h4>一刻钟服务圈</h4>
            <p style="text-align: left;">社区居民居住地附近范围能够享受到方便、快捷、舒适的社区服务，包括社会力量和居民个人提供的志愿互助服务，市场机制提供的便民利民服务以及特色服务等。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="height: 300px;">
            <div class="image">
              <img src="@/assets/images/chanpin6.jpg" alt="">
            </div>
            <h4>议事平台</h4>
            <p style="text-align: left;">可定期组织开展协商议事，随时随地让居民参与议事，让居民在协商议事中“做主角”。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="height: 300px;">
            <div class="image">
              <img src="@/assets/images/chanpin7.jpg" alt="">
            </div>
            <h4>调查问卷</h4>
            <p style="text-align: left;">方便的生成相关调查问卷，并及时的了解相应信息，同时还可以定制统计的条件以及设定答卷的方式。支持导出调查问卷结果。</p>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" style="height: 300px;">
            <div class="image">
              <img src="@/assets/images/chanpin8.jpg" alt="">
            </div>
            <h4>社区党建</h4>
            <p style="text-align: left;">
              如果说社区治理工作面临的是上上下下“千条线”，那么毋庸置疑，社区党建是穿起“千条线”的“一根针”。良好的社区治理秩序和成效，始终离不开社区党建工作的有力引领。</p>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 内容部分2 -->
    <div class="box4">
      <div class="w">
        <h2>产品价格</h2>
        <div class="jiage">
          <el-card :body-style="{ padding: '0px' }">
            <div class="jiagetupian">
              <img src="@/assets/images/jiageBg1.jpg" alt="">
            </div>
            <h4>免费试用</h4>
            <p>0元</p>
            <div class="biggongneng">
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>50+个功能点</s>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>快速生成通行证二维码</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>便捷发布办事指南</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>一键审核</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>一刻钟服务圈</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou"> </i>
                &nbsp;
                <b>设置调查问卷</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>后台数据表单</s>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>党建服务</s>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>专属客服通道</s>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>1对1行业顾问</s>
              </span>
            </div>
            <el-button>立即试用</el-button>
          </el-card>
          <el-card :body-style="{ padding: '0px' }">
            <div class="jiagetupian">
              <img src="@/assets/images/jiageBg2.jpg" alt="">
            </div>
            <h4>正式版本</h4>
            <p>30000元</p>
            <div class="biggongneng">
              <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>50+个功能点</b>
              </span>
              <br>
              <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>快速生成通行证二维码</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>便捷发布办事指南</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b> 一键审核</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>一刻钟服务圈</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>设置调查问卷</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>后台数据表单</b>
              </span>
              <br> <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>党建服务</b>
              </span>
              <br>
              <span class="gongneng2">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>专属客服通道</b>
              </span>
              <br>
              <span class="gongneng">
                <i class="iconfont icon-duigou" style="color: #bfbfbf;"></i>
                &nbsp;
                <s>1对1行业顾问</s>
              </span>
            </div>
            <el-button>立即购买</el-button>
          </el-card>
          <el-card :body-style="{ padding: '0px' }">
            <div class="jiagetupian">
              <img src="@/assets/images/jiageBg3.jpg" alt="">
            </div>
            <h4>平台定制开发</h4>
            <p>联系客服</p>
            <div class="biggongneng">
              <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>50+个功能点</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>快速生成通行证二维码</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>便捷发布办事指南</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>一键审核</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>一刻钟服务圈</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>设置调查问卷</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>后台数据表单</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>党建服务</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>专属客服通道</b>
              </span>
              <br> <span class="gongneng3">
                <i class="iconfont icon-duigou"></i>
                &nbsp;
                <b>1对1行业顾问</b>
              </span>
            </div>
            <el-button>联系客服</el-button>
          </el-card>
        </div>
      </div>
    </div>
    <!-- 关于我们 -->
    <div class="box5">
      <div class="container">
        <el-card class="box-card" shadow="hover">
          <h2>关于我们</h2>
          <p>
            平台在“智慧社区”建设、“奥林匹克-体育生活化社区”创建、“六型社区”建设、和谐社区建设、安全社区建设、“五进社区”活动中越来越发挥重要作用，已经成为政府增进居民与社区之间交流的桥梁纽带，为推进社区信息化建设，创建广泛参与、充分对话、民主协商的新型社区关系，解决基本民生需求，完善社区公共服务做出了积极探索。
            依托机构资源优势，整合社会专业资源成立的“互联社区学院”，定位于面向社区居民提供社区教育公益课堂和面向社区工作者提供能力建设课程，成立至今已开展活动和培训1000余场。目前学院课程涵盖健康教育、文化教育、安全教育、益智教育、技能培训及综合教育六大板块20多门类课程。
          </p>
        </el-card>
      </div>
    </div>
    <!-- 文章列表 -->
    <div class="essay">
      <div class="w">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="biaoti">资讯推荐</span>
            <el-button style="float: right; padding: 3px 0" type="text">
              <router-link to="/list">更多资讯</router-link>
            </el-button>
          </div>
          <div class="liebiao">
            <router-link to="/ListDetailed">互联社区 为社区治理装上“智慧大脑”</router-link>
            <i>2023/2/27</i>
          </div>
          <el-divider></el-divider>
          <div class="liebiao">
            <a href="">深入学习贯彻党的二十大精神</a>
            <i>2023/2/12</i>
          </div>
          <el-divider></el-divider>
          <div class="liebiao">
            <a href="">i will 暖心志愿行动走进金北社区</a>
            <i>2023/2/12</i>
          </div>
          <el-divider></el-divider>
          <div class="liebiao">
            <a href="">温情元宵节：暖心慰问走进赵家楼社区</a>
            <i>2023/2/05</i>
          </div>
          <el-divider></el-divider>
          <div class="liebiao">
            <a href="">北京互联社会组织资源中心恭祝大家新春快乐，阖家幸福！</a>
            <i>2023/1/22</i>
          </div>
          <el-divider></el-divider>
        </el-card>
      </div>
    </div>
    <!-- 尾部 -->
    <IndexFooter></IndexFooter>
  </div>
</template>
<script>
import IndexHead from '@/components/IndexHead.vue'
import IndexFooter from '@/components/IndexFooter.vue'
export default {
  data() {
    return {
      input: '',
      inputpass: '',
      activeIndex: '1',
      activeIndex2: '1',
      flag: false,
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  components: {
    IndexHead,
    IndexFooter,
  }
}
</script>

<style lang="scss">
// @import '../../styles/index.scss'
</style>